<!-- 装饰配置 -->
<template>
  <div style="margin-top: 16px">
    <el-form-item label="装饰类型">
      <l-select 
          :options="borderOptions" 
          v-model="myConfig.borderValue"
          @change="handleChange"
          :clearable="false" >
        </l-select>
    </el-form-item>
    <el-form-item :label="$t('主颜色')" class="form_item_margin">
      <span class="l_color_box r_margin_right8">
        <l-input-color
          v-model="myConfig.mainColor"
          :notInput="true"
        ></l-input-color>
      </span>
      <el-input v-model="myConfig.mainColor" class="r_160width"></el-input>
    </el-form-item>
    <el-form-item :label="$t('副颜色')" class="form_item_margin">
      <span class="l_color_box r_margin_right8">
        <l-input-color
          v-model="myConfig.subColor"
          :notInput="true"
        ></l-input-color>
      </span>
      <el-input v-model="myConfig.subColor" class="r_160width"></el-input>
    </el-form-item>
    <el-form-item :label="$t('背景色')" class="form_item_margin">
      <span class="l_color_box r_margin_right8">
        <l-input-color
          v-model="myConfig.backgroundColor"
          :notInput="true"
        ></l-input-color>
      </span>
      <el-input
        v-model="myConfig.backgroundColor"
        class="r_160width"
      ></el-input>
    </el-form-item>
    <el-form-item :label="$t('透明度')" class="form_item_margin">
      <el-slider
        v-model="myConfig.opacity"
        :show-tooltip="false"
        class="slider136 r_margin_right8"
      ></el-slider>
      <el-input
        v-model.number="myConfig.opacity"
        class="r_56width"
        oninput="value=value.replace(/[^\d]/g,'')"
      >
        <span slot="suffix" style="line-height: 32px">%</span>
      </el-input>
    </el-form-item>
    <hr class="hr_color" style="margin-bottom: 2px" />
  </div>
</template>

<script>
export default {
   props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
  data() {
    return {
      borderOptions: [
        {label: '装饰1', value: 1},
        {label: '装饰2', value: 2},
        {label: '装饰3', value: 3},
        {label: '装饰4', value: 4},
        {label: '装饰5', value: 5},
        {label: '装饰6', value: 6},
        {label: '装饰7', value: 7},
        {label: '装饰8', value: 8},
        {label: '装饰9', value: 9},
        {label: '装饰10', value: 10},
        {label: '装饰11', value: 11},
        {label: '装饰12', value: 12},
      ],
    }
  },
  methods: {
    handleChange(val) {
      this.$set(this.myConfig, 'borderValue', val.value)
    },
  }
}
</script>

<style>
</style>